<template>
  <div class="home">
    <div class="header">
      <h1>广告位火热招商中</h1>
    </div>
    <div class="main">
      <div class="article-detail-page" v-if="article.id">
        <nav class="nav">
          <span class="back" @click="$router.back()">&lt;</span> 面经详情
        </nav>
        <header class="header1">
          <img :src="article.creatorAvatar" alt="" />
          <div>
            <h1>{{ article.stem }}</h1>
            <p>
              {{ article.createdAt }} | {{ article.views }} 浏览量 |
              {{ article.likeCount }} 点赞数
            </p>
            <p>
              <span>{{ article.creatorName }}</span>
            </p>
          </div>
        </header>
        <main class="body">{{ article.content }}</main>
      </div>
    </div>
    <div class="footer">
      <ul>
        <li><router-link to="/home1/index">首页</router-link></li>
        <li><router-link to="/home1/shoucang">收藏</router-link></li>
        <li><router-link to="/favorite">喜欢</router-link></li>
        <li><router-link to="/home1/my">我的</router-link></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      article: {},
    };
  },
  created() {
    // this.id = this.$route.params.id;
    this.getDetail();
  },
  computed: {},
  methods: {
    async getDetail() {
      this.article = {};
      const { data } = await this.$axios.get(
        `https://mock.boxuegu.com/mock/3083/articles/${this.$route.params.id}`
      );
      this.article = data.result;
    },
  },
};
</script>
<style lang='less'  scoped>
.router-link-exact-active {
  background: linear-gradient(
    135deg,
    red,
    orange,
    yellow,
    rgb(4, 252, 4),
    rgb(0, 183, 255),
    rgb(232, 7, 253),
    rgb(238, 6, 238)
  );
}

.home {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  background: linear-gradient(
    135deg,
    red,
    orange,
    yellow,
    rgba(4, 252, 4, 0.2),
    rgba(0, 183, 255, 0.2),
    rgba(232, 7, 253, 0.2),
    rgba(238, 6, 238, 0.2)
  );
  .header {
    text-align: center;
    line-height: 50px;
    height: 50px;
    color: rgb(19, 17, 18);
    text-shadow: 30px 30px 30px rgba(79, 139, 1, 0.5);
    background: linear-gradient(
      90deg,
      rgba(255, 64, 64, 0.8) 0%,
      rgba(255, 215, 0, 0.6) 50%,
      rgba(0, 255, 0, 0.4) 100%
    );
  }
  .main {
    overflow: scroll;
    flex: 1;
  }
  ul {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    background: linear-gradient(
      90deg,
      rgba(255, 64, 64, 1) 0%,
      rgba(255, 215, 0, 1) 50%,
      rgba(0, 255, 0, 1) 100%
    );
    li {
      text-align: center;
      width: 100px;
      a {
        display: block;
        width: 100%;
        height: 50px;
        text-decoration: none;
        line-height: 50px;
      }
    }
  }
}
.header1 {
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  img{
    width: 100px;
    height: 100px;
  }
}
nav{
    width: 100%;
    height: 30px;
    line-height: 30px;
    span{
        font-size: 20px;
        margin-right: 20px;
    }
}
</style>

